<div class="wrap">
  <span class="one" title="Overflow scorll left to right Overflow">Overflow scorll left to right Overflow</span>
  <span class="one" title="AAA BBB CCC DDD EEE FFF DDD GGG">AAA BBB CCC DDD EEE FFF DDD GGG</span>
  <span class="" title="AAA BBB CCC">AAA BBB CCC</span>
  <span class="one" title="AAA BBB CCC DDD EEE FFF DDD GGG HHH III">AAA BBB CCC DDD EEE FFF DDD GGG HHH III</span>
</div>


<style>
  .wrap {
    position: relative;
    width: 200px;
    height: 100vh;
    background: #ddd;
    overflow: hidden;
  }

  span {
    display: inline-block;
    white-space: nowrap;
    padding: 5px;
    line-height: 24px;
    cursor: pointer;

  }

  .one:hover {
    animation: move 5s infinite alternate linear;
  }

  @keyframes move {
    0% {
      left: 0;
      transform: translate(0, 0);
    }

    100% {
      left: 100%;
      transform: translate(calc(-100%), 0);
    }
  }
</style>